// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { StyleSheet, Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/FontAwesome';
import HTMLView from 'react-native-htmlview';

// antd 按需加载
import { Portal, Toast } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { getData, addShopCart } from './module/module.js'
import { getShopCartList } from '../ShoppingCart/module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, RefreshScrollView, RnImage } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { press, size, ScreenWidth } from '../../util/utils.js'

class GoodDetails extends Component {
  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
    }
    this.getData = getData.bind(this)
    this.addShopCart = addShopCart.bind(this)
    this.getShopCartList = getShopCartList.bind(this)
  }

  componentDidMount() {
    const { id } = this.props
    // InteractionManager.runAfterInteractions(() => {
    // ...耗时较长的同步执行的任务...
    this.getData({ id }, () => {
      // this.setState({
      //   refreshing: false
      // })
    })
    // });
  }

  onRefresh = () => {
    const { id } = this.props
    this.setState({ refreshing: true }, () => {
      this.getData({ id }, () => {
        this.setState({
          refreshing: false
        })
      })
    });
  }

  handleAddShopCart() {
    const { goodsDetails, goodsAttr } = this.props
    let options = {
      pid: goodsAttr.id,
      quantity: 1,
    }
    if (goodsAttr.acid == 1) {
      options.acid = goodsAttr.acid
    }

    // {
    //   acid: 0, // 活动Id 当产品类型为 1每日特价 时此参数 必须
    //   checked: 0, // 是否选择该物品结算
    //   pid: 0, // 产品id
    //   ptype: 0, // 产品类型 1每日特价 2新品上市 3推荐商品 4杂志代购
    //   quantity: 0, // 物品数量
    //   skuId: 0 // skuId
    // }
    this.addShopCart(options).then(res => {
      this.getShopCartList()
    })
  }

  handleBuyNow() {
    const { goodsDetails, goodsAttr } = this.props
    Actions.submitOrders({
      goodsList: [{
        ...goodsAttr,
        quantity: 1
      }],
      price: goodsAttr.price,
      submitType: 'buy'
    })
  }

  handleReservation() {
    const { goodsDetails, goodsAttr } = this.props
    Actions.submitOrders({
      goodsList: [{
        ...goodsAttr,
        quantity: 1
      }],
      price: goodsAttr.price,
      submitType: 'reservation'
    })
  }

  render() {
    const { refreshing } = this.state
    const { goodsDetails, goodsAttr } = this.props
    return (
      <View style={Style.container}>
        <Status />
        <NavBar
          type="bright"
          title="商品详情"
          back={true}
        />
        <RefreshScrollView
          style={Style.content}
          refreshing={refreshing}
          onRefresh={this.onRefresh}
        >
          {goodsAttr ? (
            <View style={{}}>
              <View style={{

              }}>
                <RnImage style={{ width: ScreenWidth, height: ScreenWidth }} uri={goodsAttr.pic} />
              </View>

              <View style={{

              }}>
                <View style={{ padding: 10 }}>
                  <Text style={{ fontSize: 16, color: '#333', lineHeight: 24 }}>{goodsAttr.name}</Text>
                </View>
                <View style={{
                  flexDirection: 'row',
                  alignItems: 'flex-start',
                  justifyContent: 'space-between',
                  paddingHorizontal: 10,
                }}>
                  <View style={{
                    alignItems: 'flex-start',
                  }}>
                    <View style={{
                      flexDirection: 'row',
                      alignItems: 'center',
                    }}>
                      <View style={{ marginRight: 20 }}>
                        <Text style={{ fontSize: 10, color: '#999', lineHeight: 16, }}>衡河价</Text>
                        <Text style={{ fontSize: 16, color: '#e4393c', lineHeight: 20, }}>RM{goodsAttr.price}</Text>
                      </View>
                      <View style={{}}>
                        <Text style={{ fontSize: 10, color: '#999', lineHeight: 16, }}>定价</Text>
                        <Text style={{ fontSize: 16, color: '#999', lineHeight: 20, textDecorationLine: "line-through", }}>RM{goodsAttr.originalPrice}</Text>
                      </View>
                    </View>
                    <View style={{
                      backgroundColor: '#e4393c',
                      paddingHorizontal: 5,
                      marginTop: 5,
                      borderRadius: 4,
                    }}>
                      <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>{parseInt(goodsAttr.price / goodsAttr.originalPrice * 100)}% off</Text>
                    </View>
                  </View>
                  <View style={{}}>
                    {goodsAttr.stock <= 0 ? (
                      <TouchableOpacity
                        style={{
                          width: 80,
                          height: 36,
                          alignItems: 'center',
                          justifyContent: 'center',
                          backgroundColor: '#ff4f18',
                          borderRadius: 4,
                        }}
                        onPress={() => {
                          this.handleReservation()
                        }}
                      >
                        <Text style={{ fontSize: 14, color: '#fff', lineHeight: 16, textAlign: 'center' }}>立即预定</Text>
                      </TouchableOpacity>
                    ) : null}
                    {/* <Text style={{ fontSize: 12, color: '#999', lineHeight: 20, marginTop: 5, textAlign: 'center' }}>库存{goodsAttr.stock}</Text> */}
                  </View>
                </View>
              </View>
              <View style={{
                borderBottomWidth: .5,
                borderStyle: 'solid',
                borderColor: '#ddd',
                paddingLeft: 10,
                marginTop: 10,
              }}>
                <View style={{
                  padding: 15,
                  borderTopWidth: .5,
                  borderStyle: 'solid',
                  borderColor: '#ddd',
                  paddingLeft: 0
                }}>
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>作者：{goodsAttr.attr && goodsAttr.attr.author ? goodsAttr.attr.author : ''}</Text>
                </View>
                <View style={{
                  padding: 15,
                  borderTopWidth: .5,
                  borderBottomWidth: .5,
                  borderStyle: 'solid',
                  borderColor: '#ddd',
                  paddingLeft: 0
                }}>
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>出版社：{goodsAttr.publishers}</Text>
                </View>
                <View style={{
                  padding: 15,
                  borderTopWidth: .5,
                  borderBottomWidth: .5,
                  borderStyle: 'solid',
                  borderColor: '#ddd',
                  paddingLeft: 0
                }}>
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>ISBN：{goodsAttr.attr && goodsAttr.attr.isbn ? goodsAttr.attr.isbn : ''}</Text>
                </View>
              </View>
            </View>
          ) : null}
          {goodsDetails ? (
            <View style={{}}>
              {goodsDetails.productDesc ?
                <HTMLView
                  value={goodsDetails.productDesc}
                  stylesheet={styles}
                /> : null}
            </View>
          ) : null}

        </RefreshScrollView>
        {
          goodsAttr && goodsAttr.stock > 0 ? (
            <View style={{
              flexDirection: 'row',
              height: 49,
              borderTopWidth: .5,
              borderStyle: 'solid',
              borderColor: '#ddd'
            }}>
              <View style={{
                width: 70,
                height: 49,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
                <Icon name="home" size={20} color={'#666'} />
                <Text style={{ fontSize: 10, color: '#999', lineHeight: 12, }}>首页</Text>
              </View>
              <TouchableOpacity
                style={{
                  width: 70,
                  height: 49,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
                onPress={() => {
                  Actions.shoppingCart()
                }}
              >
                <Icon name="shopping-cart" size={20} color={'#666'} />
                <Text style={{ fontSize: 10, color: '#999', lineHeight: 12, }}>购物车</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={{
                  flex: 1,
                  height: 49,
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: '#ffa600',
                }}
                onPress={() => {
                  this.handleAddShopCart()
                }}
              >
                <Text style={{ fontSize: 14, color: '#fff', lineHeight: 49, textAlign: 'center' }}>加入购物车</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={{
                  flex: 1,
                  height: 49,
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: '#ff4f18'
                }}
                onPress={() => {
                  this.handleBuyNow()
                }}
              >
                <Text style={{ fontSize: 14, color: '#fff', lineHeight: 49, textAlign: 'center' }}>立即购买</Text>
              </TouchableOpacity>
            </View>
          ) : null
        }

      </View >
    );
  }
}

const styles = StyleSheet.create({

});

export default connect(({ goodsDetails, goodsAttr }) => ({
  goodsDetails, goodsAttr
}))(pureRender(GoodDetails))
 